<style type="text/css">
	.a_color {
		color:#CCC;
	}
</style>

<div class="container-fluid" align="right"  style="margin-top:70px;">
    <ul class="nav nav-pills">
        <li id="p_home" class="active"><a href="?p=home" class="a_color">Home</a></li>
        <li id="p_vocab"><a href="?p=vocab" class="a_color">Vocabuary</a></li>
        <li id="p_grammar"><a href="?p=grammar" class="a_color">Grammar</a></li>
        <li id="p_listen"><a href="?p=listen" class="a_color">Listening</a></li>
        <li id="p_ecl"><a href="?p=ecl" class="a_color">Pre-ECL</a></li>
        <li id="p_contact"><a href="?p=contact" class="a_color">Contact</a></li>
    </ul>
</div>   

<script type="text/javascript">
$(document).ready(function () {
	var p = '<?=$p?>';
	$('#p_home').removeClass('active');
	$('#p_vocab').removeClass('active');
	$('#p_grammar').removeClass('active');
	$('#p_listen').removeClass('active');
	$('#p_ecl').removeClass('active');
	$('#p_contact').removeClass('active');
	
	if ((p == 'home')) { $('#p_home').addClass('active'); }
	if (p == 'vocab') { $('#p_vocab').addClass('active'); }
	if (p == 'grammar') { $('#p_grammar').addClass('active'); }
	if (p == 'listen') { $('#p_listen').addClass('active'); }
	if (p == 'ecl') { $('#p_ecl').addClass('active'); }
	if (p == 'contact') { $('#p_contact').addClass('active'); }
	
});
</script>